<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { Zoom } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/zoom'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import html2canvas from 'html2canvas'
const { proxy } = getCurrentInstance()

/* ---- */
const logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* ---- */
const user = reactive({
  info: '',
  telphone: '',
  // ----
  company: '',
  msg: '',
  desc: '',
  foot: '',
  sign: '',
  stamp: '',
  // ----
  forFNum: 0,
  bookId: 0,
  productId: 0,
  // ----
  imageShow: false,
  imageData: '',
  // ----
  btnTxt: '下载材质书',
  // ----
  title: '',
  // ----
  share_title: proxy.$shareTitle,
  share_desc: proxy.$shareDesc,
  share_icon: proxy.$shareIcon,
  // ----
  power: 1
})
// ----
const modules = [Zoom]
// ----
const QR = reactive({
  show: false,
  text: '',
  size: 500
})
// ----
const mate = reactive({
  type: '',
  sn: '',
  date: '',
  // ----
  goodsName: '',
  stands: '',
  elements: [],
  yield: '',
  tensile: '',
  elongation: '',
  impacts: [],
  xray: '',
  hardness: '',
  hydrogen: '',
  ferrite: '',
  fields_1: '',
  fields_2: '',
  tfillet_weld: '',
  description: ''
})

/* ---- */
const layer = ref()

/* ---- */
const setAppTitle = (title) => {
  document.title = title
  // --利用iframe的onload事件刷新页面--
  const iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'
  iframe.style.width = 0
  iframe.style.height = 0
  document.body.appendChild(iframe)
  nextTick(() => { document.body.removeChild(iframe) })
}
// --设置微信分享--
const setWebShare = (info) => {
  const forSn = proxy.$Store.get('SN')
  const currentUrl = window.location.href.split('#')[0]
  const shareLink = (Number(currentUrl.indexOf('sn=')) === Number(-1)) ? ((Number(currentUrl.indexOf('?')) === Number(-1)) ? currentUrl + '?sn=' + forSn : currentUrl + '&sn=' + forSn) : currentUrl
  proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
    if (!obj) return
    // ----
    obj.hideMenuItem()
    obj.showMenuList(['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:QZone'])
    // ----
    obj.share({
      title: info.title,
      desc: info.desc,
      link: shareLink,
      imgUrl: info.imgUrl
    })
  })
}
// ----
const getCurrencyInfo = async () => {
  if (Number(Object.keys(logUser).length) > 0) user.power = 2
  // --获取用户信息--
  if (proxy.$route.query.dealer_id) {
    await proxy.$http.get('dealer/index', {
      params: { 'DealerSearch[id]': proxy.$route.query.dealer_id }
    }).then((res) => {
      const UData = res.items[0] || {}
      user.telphone = UData.tag || UData.telphone
      // ----
      proxy.$Myfun.getJsonData(UData.ads_content, (resJson) => {
        const RJData = resJson[0] || {}
        // ----
        const MData = RJData.material || {}
        if (MData.company) user.company = proxy.$Myfun.setText(MData.company)
        if (MData.msg) user.msg = proxy.$Myfun.setText(MData.msg)
        if (MData.desc) user.desc = proxy.$Myfun.setArea(MData.desc)
        if (MData.foot) user.foot = MData.foot
        let forVoucher = ''
        let forQuality = ''
        if (MData.voucher) forVoucher = '制单人：' + MData.voucher + '　'
        if (MData.quality) forQuality = '质检员：' + MData.quality
        user.sign = forVoucher + forQuality
        if (Number(MData.stamp.length) > 0) user.stamp = MData.stamp[0].image
      })
      // ----
      if (UData.name) user.share_title = proxy.$Myfun.setText(UData.name)
      if (UData.remark) user.share_desc = proxy.$Myfun.setText(UData.remark)
      proxy.$Myfun.getJsonData(UData.avatar, (resJson) => {
        if (Number(resJson.length) > 0) user.share_icon = resJson[0].image
      })
    }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
    // --获取定制功能--
    const customItems = forSys.filter((item) => { return String(item.name) === 'market_customFuncUser' })
    if (Number(customItems.length) === 1) {
      await proxy.$Myfun.getJsonData(customItems[0].value, (resJson) => {
        if (Number(resJson.length) > 0) {
          if (resJson[0].material && Number(resJson[0].material.length) > 0) {
            resJson[0].material.some((item) => {
              if (String(item.telphone) === String(user.telphone)) user.info = item.name
            })
          }
        }
      })
    }
  }
  // --获取生成材质书信息--
  if (proxy.$route.query.id) {
    await proxy.$http.get('material-has-dealer/index', {
      params: { 'MaterialHasDealerSearch[id]': proxy.$route.query.id }
    }).then((res) => {
      if (Number(res.items.length) > 0) {
        const MData = res.items[0]
        // ----
        mate.type = proxy.$Myfun.setText(MData.type)
        mate.sn = proxy.$Myfun.setText(MData.has_sn)
        mate.date = proxy.$Myfun.getDateShort(MData.date)
        // ----
        user.bookId = MData.book_id
        user.productId = MData.has_product_id
      }
    }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
  // --获取材质书对应商品信息 & 云仓产品信息--
  if (Number(user.bookId) > 0 && Number(user.productId) > 0) {
    const forMateData = { params: { 'MaterialBookSearch[id]': user.bookId } }
    const forGoodsData = { params: { 'ProductSearch[id]': user.productId } }
    await proxy.$Axios.all([
      proxy.$Axios.get('material-book/index', forMateData),
      proxy.$Axios.get('proc/index', forGoodsData)
    ]).then(proxy.$Axios.spread((mateData, goodsData) => {
      // --材质书对应商品信息--
      const MData = mateData.items[0] || {}
      proxy.$Myfun.getJsonData(MData.standard, (resJson) => {
        resJson.forEach((item, index) => {
          if (item.desc) mate.stands += Number(index) > 0 ? '<br/>' + item.desc : item.desc
        })
      })
      proxy.$Myfun.getJsonData(MData.chemical_element, (resJson) => {
        const eleItems = []
        resJson.forEach((item) => {
          eleItems.push({
            one: item.one || '＼',
            two: item.two || '＼',
            three: item.three || '＼'
          })
        })
        mate.elements = eleItems
      })
      proxy.$Myfun.getJsonData(MData.impact_test, (resJson) => {
        const impItems = []
        resJson.forEach((item) => {
          impItems.push({
            one: item.one || '＼',
            two: item.two || '＼'
          })
        })
        mate.impacts = impItems
      })
      // ----
      mate.yield = proxy.$Myfun.setText(MData.yield_strength)
      mate.tensile = proxy.$Myfun.setText(MData.tensile_strength)
      mate.elongation = proxy.$Myfun.setText(MData.elongation_a)
      mate.xray = proxy.$Myfun.setText(MData.x_ray_inspection)
      mate.hardness = proxy.$Myfun.setText(MData.hardness_test)
      mate.hydrogen = proxy.$Myfun.setText(MData.dhc)
      mate.ferrite = proxy.$Myfun.setText(MData.ferrite_content)
      mate.fields_1 = proxy.$Myfun.setText(MData.fields_1)
      mate.fields_2 = proxy.$Myfun.setText(MData.fields_2)
      mate.tfillet_weld = proxy.$Myfun.setText(MData.tfillet_weld)
      mate.description = MData.description
      // ----
      if (mate.yield) user.forFNum++
      if (mate.tensile) user.forFNum++
      if (mate.elongation) user.forFNum++
      if (Number(mate.impacts.length) > 0) user.forFNum += 2
      if (mate.xray) user.forFNum++
      if (mate.hardness) user.forFNum++
      if (mate.hydrogen) user.forFNum++
      if (mate.ferrite) user.forFNum++
      if (mate.fields_1) user.forFNum++
      if (mate.fields_2) user.forFNum++
      if (mate.tfillet_weld) user.forFNum++
      // --云仓产品信息--
      const GData = goodsData.items[0] || {}
      mate.goodsName = proxy.$Myfun.setText(GData.name)
    })).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
  // ----
  if (user.info) user.title = user.info + document.title
  // --设置网页title--
  const forTitle = user.title || document.title
  setAppTitle(forTitle)
  // --设置微信分享功能--
  const forShare = {
    title: user.share_title,
    desc: user.share_desc,
    imgUrl: user.share_icon
  }
  setWebShare(forShare)
  // ----
  getAuditFun(1)
}
// ----
const getAuditFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      let qrUrl = proxy.$route.path
      qrUrl += '?id=' + proxy.$route.query.id + '&sn=' + proxy.$Store.get('SN')
      if (proxy.$route.query.dealer_id) qrUrl += '&dealer_id=' + proxy.$route.query.dealer_id
      qrUrl = proxy.$siteSrc + qrUrl
      // ----
      QR.text = qrUrl
      // ----
      nextTick(() => { QR.show = true })
      break
    }
    case 2: {
      user.imageShow = false
      break
    }
    case 3: {
      if (Number(user.power) === 1) {
        proxy.$Myfun.openPage(proxy, 'push', 'UserLogin', { toBack: true })
        return false
      }
      // ----
      const element = proxy.$refs.pdfContent
      // ----
      html2canvas(element, {
        allowTaint: true,
        useCORS: true,
        scale: 1,
        width: element.offsetWidth,
        height: element.offsetHeight
      }).then(async (canvas) => {
        user.imageData = canvas.toDataURL('image/png', 1.0)
        // ----
        setTimeout(() => { user.imageShow = true }, 100)
      })
      break
    }
  }
}

/* ---- */
onMounted(() => {
  getCurrencyInfo()
})
onBeforeRouteLeave(() => { proxy.$Myfun.setScrollTop(proxy.$refs.formSection) })
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <div class="mate-view xw-bg-white">
      <div class="mate-table" ref="pdfContent">
        <div class="mate-tr">
          <div class="mate-td">
            <div class="mate-box">
              <ul>
                <li>
                  <div class="MEW-top xw-flex xw-flex-align xw-flex-justify">
                    <div class="MEW-top-title" v-if="user.company || user.msg">
                      <h1 v-if="user.company">{{user.company}}</h1>
                      <p :style="[user.company ? {marginTop: '1rem'} : {}]" v-if="user.msg">{{user.msg}}</p>
                    </div>
                    <div class="xw-flex-W1"></div>
                    <div class="MEW-top-msg" v-html="user.desc" v-if="user.desc"></div>
                    <div class="MEW-top-ewm" v-if="QR.show"><vue-qr :text="QR.text" :size="QR.size"></vue-qr></div>
                  </div>
                </li>
              </ul>
              <ul v-if="mate.goodsName || mate.type || mate.sn || mate.stands || mate.date">
                <li>
                  <table class="MEW-one">
                    <tr>
                      <th v-if="mate.goodsName">名称</th>
                      <th v-if="mate.type">规格</th>
                      <th v-if="mate.sn">批号</th>
                      <th v-if="mate.stands">标准</th>
                      <th v-if="mate.date">日期</th>
                    </tr>
                    <tr>
                      <td v-if="mate.goodsName">{{mate.goodsName}}</td>
                      <td v-if="mate.type">{{mate.type}}</td>
                      <td v-if="mate.sn">{{mate.sn}}</td>
                      <td v-html="mate.stands" v-if="mate.stands"></td>
                      <td v-if="mate.date">{{mate.date}}</td>
                    </tr>
                  </table>
                </li>
              </ul>
              <ul v-if="Number(mate.elements.length) > 0">
                <li>
                  <div class="MEW-title">焊缝化学元素</div>
                  <table class="MEW-two">
                    <tr>
                      <th>成分</th>
                      <td v-for="(item, index) in mate.elements">{{item.one}}</td>
                    </tr>
                    <tr>
                      <th>标准值</th>
                      <td v-for="(item, index) in mate.elements">{{item.two}}</td>
                    </tr>
                    <tr>
                      <th>实测值</th>
                      <td v-for="(item, index) in mate.elements">{{item.three}}</td>
                    </tr>
                  </table>
                </li>
              </ul>
              <ul v-if="Number(user.forFNum) > 0 || mate.description">
                <li>
                  <div class="MEW-title">焊缝力学性能</div>
                  <table class="MEW-three" v-if="Number(user.forFNum) > 0">
                    <tr>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.yield">屈服强度<br/>（Mpa）</th>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.tensile">抗拉强度<br/>（Mpa）</th>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.elongation">延伸率<br/>（%）</th>
                      <th colspan="2" v-if="Number(mate.impacts.length) > 0">冲击试验</th>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.xray">X射线探伤</th>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.hardness">硬度试验</th>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.hydrogen">扩散氢含量</th>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.ferrite">铁素体含量</th>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.fields_1">晶间腐蚀试验</th>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.fields_2">纵向弯曲</th>
                      <th :rowspan="Number(mate.impacts.length) > 0 ? 2 : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.tfillet_weld">T型接头角焊缝</th>
                    </tr>
                    <tr v-if="Number(mate.impacts.length) > 0">
                      <th>温度</th>
                      <th>冲击功</th>
                    </tr>
                    <tr>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.yield">{{mate.yield}}</td>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.tensile">{{mate.tensile}}</td>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.elongation">{{mate.elongation}}</td>
                      <template v-for="(item, index) in mate.impacts">
                      <template v-if="Number(index) === 0">
                      <td>{{item.one}}</td>
                      <td>{{item.two}}</td>
                      </template>
                      </template>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.xray">{{mate.xray}}</td>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.hardness">{{mate.hardness}}</td>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.hydrogen">{{mate.hydrogen}}</td>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.ferrite">{{mate.ferrite}}</td>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.fields_1">{{mate.fields_1}}</td>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.fields_2">{{mate.fields_2}}</td>
                      <td :rowspan="Number(mate.impacts.length) > 0 ? Number(mate.impacts.length) : 1" :colspan="Number(user.forFNum) === 1 ? 2 : 1" v-if="mate.tfillet_weld">{{mate.tfillet_weld}}</td>
                    </tr>
                    <template v-for="(item, index) in mate.impacts">
                    <tr v-if="Number(index) > 0">
                      <td>{{item.one}}</td>
                      <td>{{item.two}}</td>
                    </tr>
                    </template>
                  </table>
                  <table class="MEW-four" :class="{no_data:Number(user.forFNum) <= 0}" v-if="mate.description">
                    <tr>
                      <th>用途说明</th>
                      <td v-html="mate.description"></td>
                    </tr>
                  </table>
                </li>
              </ul>
              <ul v-if="user.foot || user.sign">
                <li>
                  <div class="MEW-foot xw-flex xw-flex-align xw-flex-justify">
                    <div class="MEW-foot-title xw-flex-W1" v-if="user.foot">{{user.foot}}</div>
                    <div class="MEW-foot-msg" v-if="user.sign">{{user.sign}}</div>
                  </div>
                </li>
              </ul>
              <div class="MEW-img" v-if="user.stamp"><img :src="user.stamp"/></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <transition name="fade"><div class="xw-full" v-if="user.imageShow">
      <swiper :modules="modules" :zoom="true" class="album-box">
        <swiper-slide>
          <div class="swiper-zoom-container"><img :src="user.imageData"/></div>
        </swiper-slide>
      </swiper>
      <div class="FBR-box xw-flex xw-flex-align xw-flex-justify">
        <div class="FBR-title">长按保存图片即可</div>
        <div class="FBR-close xw-act" @click="getAuditFun(2)">返回</div>
      </div>
    </div></transition>
    <footer>
      <div class="tabs xw-foot-Tfg xw-flex xw-flex-align">
        <div class="TAB-mbtn xw-radius-3 xw-bgCL-11 xw-act xw-ellipsis xw-flex-W1" @click="getAuditFun(3)">{{user.btnTxt}}</div>
      </div>
    </footer>
    <layer-view ref="layer"/>
  </div>
</template>

<style scoped>
/* ---- */
.mate-view { margin: 0 0 5.4rem; overflow-x: auto; }
/* ---- */
.mate-table { display: table; border-collapse: collapse; border-spacing: 0; word-break: break-all; white-space: nowrap; }
.mate-tr { display: table-row; }
.mate-td { display: table-cell; padding: 1.5rem 1rem; }
/* ---- */
.mate-box { position: relative; display: table; border-collapse: collapse; border-spacing: 0; word-break: break-all; white-space: nowrap; }
.mate-box ul { display: table-row; }
.mate-box ul li { display: table-cell; }
.mate-box th { font-weight: bold; }
/* ---- */
.MEW-title { padding: 1rem 0 0.5rem; line-height: 2.5rem; font-size: 1.6rem; font-weight: bold; }
.MEW-img { position: absolute; right: 0.5rem; bottom: -0.5rem; }
.MEW-img img { width: 14rem; }
/* ---- */
.MEW-top { padding: 0 0 1.4rem; text-align: center; }
.MEW-top-title h1 { line-height: 2rem; font-size: 2.2rem; font-weight: bold; text-align: justify; }
.MEW-top-title p { line-height: 2rem; font-size: 1.7rem; }
.MEW-top-msg { margin-left: 4rem; padding: 0.5rem 0.5rem 0.5rem 1rem; line-height: 2.5rem; font-size: 1.7rem; letter-spacing: 0.5rem; border: 1px solid #444444; }
.MEW-top-ewm { margin-left: 2rem; }
.MEW-top-ewm img { height: 8rem; }
/* ---- */
.MEW-one { width: 100%; border-spacing: 0; border-style: solid; border-color: #444444; border-width: 0 0 1px 1px; }
.MEW-one th, .MEW-one td { padding: 0.5rem; line-height: 2rem; text-align: center; vertical-align: middle; border-style: solid; border-color: #444444; border-width: 1px 1px 0 0; }
/* ---- */
.MEW-two { width: 100%; border-spacing: 0; border-style: solid; border-color: #444444; border-width: 0 0 1px 1px; }
.MEW-two th, .MEW-two td { padding: 0.5rem; line-height: 2rem; text-align: center; vertical-align: middle; border-style: solid; border-color: #444444; border-width: 1px 1px 0 0; }
.MEW-two th { width: 12%; }
/* ---- */
.MEW-three { width: 100%; border-spacing: 0; border-style: solid; border-color: #444444; border-width: 0 0 1px 1px; }
.MEW-three th, .MEW-three td { padding: 0.5rem; line-height: 2rem; text-align: center; vertical-align: middle; border-style: solid; border-color: #444444; border-width: 1px 1px 0 0; }
/* ---- */
.MEW-four { width: 100%; border-spacing: 0; border-style: solid; border-color: #444444; border-width: 0 0 1px 1px; }
.MEW-four th, .MEW-four td { padding: 0.5rem; line-height: 2rem; border-style: solid; border-color: #444444; border-width: 0 1px 0 0; }
.MEW-four td { word-break: break-all; white-space: normal; }
.MEW-four.no_data{border-width: 1px 0 1px 1px;}
/* ---- */
.MEW-foot { padding: 1rem 0; line-height: 2rem; }
.MEW-foot-msg { margin-left: 10rem; }

/* ---- */
.xw-full { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.9); z-index: 999; }

/* ---- */
.FBR-box { position: absolute; padding: 0 0 4rem; top: 0; right: 0; left: 0; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); z-index: 9999; color: #ffffff; }
.FBR-title { padding: 1rem; font-size: 1.6rem; }
.FBR-close { padding: 1rem; }

/* ---- */
.tabs { padding: 0 1rem; }
.TAB-mbtn { height: 4rem; line-height: 4rem; font-size: 1.6rem; }
</style>
<style>
/* ---- */
.album-box { width: 100%; height: 100%; }
</style>